// @a   椭圆x轴半径(长半径)
// @b   椭圆y轴半径(短半径)
// @s   坐标点的数目(数目越大，动画越精细)
// @d   圆点半径
.create-oval(@a, @b, @type, @color) {
    width          : @a*2 ;
    height         : @b*2;
    border-radius  : 100%;
    border         : 1px @type @color;
    transform-style: preserve-3d;
}

.create-dot(@a, @b, @d, @color) {
    width          : @d * 2;
    height         : @d * 2;
    left           : @a - @d;
    top            : @b - @d;
    background     : @color;
    border-radius  : 100%;
    position       : absolute;
    transform-style: preserve-3d;
    box-shadow     : 0 0 10px var(--dashColor), 0 0 15px var(--boxColor), 0 0 30px var(--boxColor2), 0 0 40px var(--color);
    transform      : translate(@a, 0px);
}

.create-animation(@index, @s, @a, @b) {
    .loop(@index, @s, @a, @b)
}

.loop(@index, @s, @a, @b) when (@index < @s+1) {
    .loop((@index + 1), @s, @a, @b);
    @keyframeSel: @index * 100%/@s;

    @{keyframeSel} {
        transform: translate(@a*cos(360deg/@s*@index), @b*sin(360deg/@s*@index));
    }
}

.create-keyframes(@name, @index, @s, @a, @b) {
    @keyframes @name {
        .create-animation(@index, @s, @a, @b)
    }
}


body {
    background: #222;
}

:root {
    --color    : rgba(255, 165, 0, 1);
    --dashColor: rgba(255, 165, 0, 0.5);
    --boxColor : rgba(255, 165, 0, 0.8);
    --boxColor2: rgba(255, 165, 0, 0.9);
}


.oval {
    .create-oval(160px, 60px, solid, orange);
    position: relative;
}

.oval::after {
    content: '';
    .create-dot(160px, 60px, 5px, orange);
    animation: move 10s linear infinite;
    .create-keyframes(move, 0, 20, 160px, 60px);
}


.circle-inner {
    position: absolute;
    .create-oval(140px, 50px, dashed, orange);
    top : calc(60px - 50px);
    left: calc(160px - 140px);

}

.circle-inner::after {
    content: '';
    .create-dot(140px, 50px, 4px, orange);
    animation: move1 10s 1s linear infinite;
    .create-keyframes(move1, 0, 20, 140px, 50px);
}


.circle-inner1 {
    position: absolute;
    .create-oval(120px, 40px, solid, orange);
    top : calc(60px - 40px);
    left: calc(160px - 120px);

}

.circle-inner1::after {
    content: '';
    .create-dot(120px, 40px, 3px, orange);
    animation: move2 10s 2s linear infinite;
    .create-keyframes(move2, 0, 20, 120px, 40px);
}


.rotate90 {
    transform: rotate(90deg);
}

// .dima,
// .dima::after {
//     position        : absolute;
//     top             : 50%;
//     left            : 50%;
//     height          : 8px;
//     width           : 8px;
//     border-radius   : 100%;
//     background-color: #fff;
//     box-shadow      : 0 0 10px #000, 0 0 15px var(--color), 0 0 30px var(--color);
//     top             : 50%;
//     left            : 50%;
//     margin-top      : -4px;
//     margin-left     : -4px;
// }

// .dima::after {
//     content  : '';
//     transform: rotateX(90deg);
// }